<template>
	<view>
		<up-navbar @leftClick="leftClick" safeAreaInsetTop placeholder></up-navbar>
		<up-cell-group :border="false">
			<up-cell>
				<template #title>
					<up-text v-if="id != 99" text="修改求职期望" size="25px"></up-text>
					<up-text v-else text="新增求职期望" size="25px"></up-text>
					<up-text text="我们会据此展示职位,并将你推荐给Boss" size="15px" style="margin-top: 10px"></up-text>
				</template>
			</up-cell>
			<up-cell :border="false" @click="selectPosition">
				<template #title>
					<up-text text="期望行业" size="15px"></up-text>
					<up-text :text="workIntention" size="20px" :color="positionColor" style="margin-top: 10px"></up-text>
				</template>
				<template #right-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
						<path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path>
					</svg>
				</template>
			</up-cell>
			<up-cell v-if="workIntention !== '请选择期望行业'" :border="false" @click="selectPosition">
				<template #title>
					<up-text text="期望职位" size="15px"></up-text>
					<up-text :text="workPosition" size="20px" :color="intentionColor" style="margin-top: 10px"></up-text>
				</template>
				<template #right-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
						<path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path>
					</svg>
				</template>
			</up-cell>
			<up-cell :border="false" @click="cityShow = true">
				<template #title>
					<up-text text="工作城市" size="15px"></up-text>
					<up-text :text="workPlace" size="20px" :color="workPlaceColor" style="margin-top: 10px"></up-text>
				</template>
				<template #right-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
						<path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path>
					</svg>
				</template>
			</up-cell>
			<up-cell @click="openStatusSelect" :border="false">
				<template #title>
					<up-text text="薪资要求" size="15px"></up-text>
					<up-text :text="salaryRange" size="20px" :color="fontColor" style="margin-top: 10px"></up-text>
				</template>
				<template #right-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
						<path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path>
					</svg>
				</template>
			</up-cell>
		</up-cell-group>
		<up-picker :show="show" ref="uPickerRef" :defaultIndex="defaultIndex" :columns="columns" @change="changeHandler" @confirm="confirm" @cancel="this.show = false"></up-picker>
		<view class="save">
			<u-button v-if="this.total > 1" type="error" style="width: 200px; margin-right: 10px;" @click="save">删除</u-button>
			<u-button type="primary" @click="save">保存</u-button>
		</view>
		<up-notify ref="uNotifyRef" message="Hi uview-plus"></up-notify>
		<city-select v-model="cityShow" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
import { test } from '../../uni_modules/uview-plus';
import citySelect from '@/common/u-city-select.vue';

export default {
	components: {
		citySelect
	},
	data() {
		return {
			workIntention: '请选择期望行业',
			intentionColor: '#dddddd',
			workPosition: '请选择期望职位',
			positionColor: '#dddddd',
			workPlace: '请选择工作城市',
			workPlaceColor: '#dddddd',
			//单纯展示，没其他吊用
			startworkSalary: '',
			endworkSalary: '',
			salaryRange: '请选择薪资要求',
			show: false,
			selectedSalaryLeft: null,
			columns: [
				// 初始化左边和右边的薪资选项
				this.getSalaryOptions(),
				this.getSalaryOptions()
			],
			fontColor: '#dddddd',
			// 期望表字段
			Intention: {
				candidateId:1,
				expectedIndustry: '',
				expectedPosition: '',
				workPlace: '',
				startSalary: 0,
				endSalary: 0
			},
			defaultIndex: [0, 0],
			total: 0,
			height: 30, // 城市选择高度
			bgColor: this.$u.color.bgColor, // 背景颜色
			marginTop: 30, // 顶部间隔
			marginBottom: 30, // 底部间隔
			cityShow: false, // 城市选择显示
			id: 0
		};
	},
	onShow() {
		this.showData();
	},
	onLoad(options) {
		console.log(options.id);
		this.id = options.id;
		if (options.id == 99) {
			return;
		}
		this.$api
			.getIntentionsById({
				id: options.id
			})
			.then((res) => {
				this.total = options.total;
				this.Intention = res.data;
				this.workIntention = res.data.industryName;
				this.intentionColor = 'black';
				this.workPosition = res.data.positionName;
				this.positionColor = 'black';
				this.workPlace = res.data.workPlace;
				this.workPlaceColor = 'black';
				if (res.data.startSalary != 0) {
					this.salaryRange = res.data.startSalary + 'K - ' + res.data.endSalary + 'K';
					this.fontColor = 'black';
					//获取索引值
					let index = this.getSalaryOptions().filter((opt) => opt.value === res.data.startSalary);
					this.setRightColumnOptions(res.data.startSalary, index);
					this.defaultIndex = [res.data.startSalary, res.data.endSalary - res.data.startSalary - 1];
				} else {
					this.salaryRange = '不限';
					this.fontColor = 'black';
					this.$refs.uPickerRef.setColumnValues(1, [{ text: '不限', value: 0 }]);
				}
			});
	},
	methods: {
		showData() {
			if (uni.getStorageSync('item') !== '') {
				console.log(uni.getStorageSync('item'));
				this.workIntention = uni.getStorageSync('item').name1;
				this.intentionColor = 'black';
				this.workPosition = uni.getStorageSync('item').name2;
				this.positionColor = 'black';
				this.Intention.expectedIndustry = uni.getStorageSync('item').id1;
				this.Intention.expectedPosition = uni.getStorageSync('item').id2;
			}
		},
		leftClick(){
			uni.navigateTo({
				url:'/pages/personal/onlineResumeView'
			})
		},
		confirm(value) {
			// value 是一个包含所有列选中值的数组
			console.log('选中的值:', value);

			// 如果您的第一列表示起薪，第二列表示薪资上限
			this.startworkSalary = value.value[0].text; // 更新起薪值
			this.endworkSalary = value.value[1].text; // 更新薪资上限值
			// 值展示
			console.log('起薪:', this.startworkSalary, '上薪:', this.endworkSalary);
			this.show = false; // 关闭选择框
			if (this.startworkSalary && this.endworkSalary) {
				if (this.startworkSalary === '不限') {
					this.salaryRange = '不限';
					this.fontColor = 'black';
					this.Intention.startSalary = -1;
					this.Intention.endSalary = -1;
				} else {
					this.salaryRange = `${this.startworkSalary} - ${this.endworkSalary}`;
					this.fontColor = 'black';
					this.Intention.startSalary = value.value[0].value;
					this.Intention.endSalary = value.value[1].value;
				}
			}
		},
		openStatusSelect() {
			this.show = true;
			console.log(this.show);
		},
		getSalaryOptions() {
			// 薪资选项
			return [
				{ text: '不限', value: 0 },
				{ text: '1K', value: 1 },
				{ text: '2K', value: 2 },
				{ text: '3K', value: 3 },
				{ text: '4K', value: 4 },
				{ text: '5K', value: 5 },
				{ text: '6K', value: 6 },
				{ text: '7K', value: 7 },
				{ text: '8K', value: 8 },
				{ text: '9K', value: 9 },
				{ text: '10K', value: 10 },
				{ text: '11K', value: 11 },
				{ text: '12K', value: 12 },
				{ text: '13K', value: 13 },
				{ text: '14K', value: 14 },
				{ text: '15K', value: 15 },
				{ text: '16K', value: 16 },
				{ text: '17K', value: 17 },
				{ text: '18K', value: 18 },
				{ text: '19K', value: 19 },
				{ text: '20K', value: 20 }
			];
		},
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index
			} = e;
			console.log(value);
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				this.setRightColumnOptions(index, value);
			}
		},
		setRightColumnOptions(index, value) {
			if (index === 20) {
				this.$refs.uPickerRef.setColumnValues(1, [{ text: '21k', value: 21 }]);
			} else if (index === 0) {
				this.$refs.uPickerRef.setColumnValues(1, [{ text: '不限', value: '0' }]);
			} else {
				const selectedValue = value[0].value;
				this.$refs.uPickerRef.setColumnValues(
					1,
					this.getSalaryOptions().filter((opt) => opt.value > selectedValue)
				);
			}
		},
		save() {
			//输出一下存入数据库的对象
			console.log(this.Intention);
			//判断是否有未填的选项
			if (this.Intention.workPlace === '') {
				this.$refs.uNotifyRef.show({
					top: 10,
					type: 'error',
					color: '#f56c6c',
					bgColor: '#fef0f0',
					message: '期望行业不能为空！',
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop: true
				});
			} else if (this.Intention.workPlace === '') {
				this.$refs.uNotifyRef.show({
					top: 10,
					type: 'error',
					color: '#f56c6c',
					bgColor: '#fef0f0',
					message: '工作城市不能为空！',
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop: true
				});
			} else if (this.Intention.startSalary === 0) {
				this.$refs.uNotifyRef.show({
					top: 10,
					type: 'error',
					color: '#f56c6c',
					bgColor: '#fef0f0',
					message: '薪资选择不能为空！',
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop: true
				});
			}
			this.$api.saveIntention(this.Intention).then(() => {
				uni.navigateBack();
			});
		},
		// 前往选择行业职位
		selectPosition() {
			const pages = getCurrentPages();
			console.log(pages);

			uni.navigateTo({
				url: '/pages/positions/positions?id=1'
			});
		},
		// 选择地址
		cityChange(e) {
			this.Intention.workPlace = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.workPlace = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.workPlaceColor = 'black';
			this.show = false;
		}
	}
};
</script>

<style>
.sticky-button {
	display: flex;
	width: 70%;
	position: fixed;
	bottom: 20px; /* 距离底部20px */
	left: 50%;
	transform: translateX(-50%); /* 居中对齐 */
	padding: 5px;
	font-size: 18px;
	color: white;
	border: none;
	cursor: pointer;
}
	.save {
		position: fixed;
		bottom: 0;
		width: 95%;
		background-color: #fff;
		padding: 10px;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		display: flex;
	}
</style>
